<template>
  <div 
    v-if="isVisible" 
    class="opening-scene-3d"
    :class="{ 'fade-out': isFadingOut }"
  >
    <div class="scene-container">
      <!-- 3D Logo -->
      <div class="logo-3d" ref="logoRef">
        <div class="logo-face front">SHU</div>
        <div class="logo-face back">AI</div>
        <div class="logo-face right">CODE</div>
        <div class="logo-face left">PLATFORM</div>
        <div class="logo-face top"></div>
        <div class="logo-face bottom"></div>
      </div>
      
      <!-- 3D 粒子环绕 -->
      <div class="particles-container" ref="particlesRef"></div>
      
      <!-- 加载文字 -->
      <div class="loading-text" ref="textRef">
        <span class="loading-char" v-for="(char, index) in loadingText" :key="index">
          {{ char }}
        </span>
      </div>
      
      <!-- 进度条 -->
      <div class="progress-container">
        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'
import * as THREE from 'three'

const isVisible = ref(true)
const isFadingOut = ref(false)
const progress = ref(0)
const loadingText = ref('LOADING...')

const logoRef = ref<HTMLElement>()
const particlesRef = ref<HTMLElement>()
const textRef = ref<HTMLElement>()

let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer
let particles: THREE.Points
let animationId: number

const initThreeJS = () => {
  if (!particlesRef.value) return

  // 场景设置
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
  
  renderer.setSize(300, 300)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  particlesRef.value.appendChild(renderer.domElement)

  // 创建粒子系统
  createParticles()
  
  camera.position.z = 5
  animate()
}

const createParticles = () => {
  const particleCount = 50
  const geometry = new THREE.BufferGeometry()
  const positions = new Float32Array(particleCount * 3)
  
  for (let i = 0; i < particleCount; i++) {
    const i3 = i * 3
    const radius = 2 + Math.random() * 2
    const theta = Math.random() * Math.PI * 2
    const phi = Math.random() * Math.PI
    
    positions[i3] = radius * Math.sin(phi) * Math.cos(theta)
    positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta)
    positions[i3 + 2] = radius * Math.cos(phi)
  }
  
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
  
  const material = new THREE.PointsMaterial({
    size: 3,
    color: 0x3b82f6,
    transparent: true,
    opacity: 0.8,
    blending: THREE.AdditiveBlending
  })
  
  particles = new THREE.Points(geometry, material)
  scene.add(particles)
}

const animate = () => {
  animationId = requestAnimationFrame(animate)
  
  if (particles) {
    particles.rotation.x += 0.01
    particles.rotation.y += 0.02
  }
  
  renderer.render(scene, camera)
}

const startAnimation = () => {
  const tl = gsap.timeline()
  
  // Logo 3D 动画
  tl.fromTo(logoRef.value, 
    { 
      rotationY: -180,
      scale: 0.5,
      opacity: 0
    },
    {
      rotationY: 0,
      scale: 1,
      opacity: 1,
      duration: 1.5,
      ease: "back.out(1.7)"
    }
  )
  
  // 文字动画
  tl.fromTo('.loading-char',
    {
      opacity: 0,
      y: 50,
      rotationX: -90
    },
    {
      opacity: 1,
      y: 0,
      rotationX: 0,
      duration: 0.8,
      stagger: 0.1,
      ease: "back.out(1.7)"
    },
    "-=1"
  )
  
  // 进度条动画
  const progressTween = gsap.to(progress, {
    value: 100,
    duration: 3,
    ease: "power2.out",
    onComplete: () => {
      setTimeout(hideScene, 500)
    }
  })
}

const hideScene = () => {
  isFadingOut.value = true
  
  gsap.to('.opening-scene-3d', {
    opacity: 0,
    scale: 1.1,
    duration: 0.8,
    ease: "power2.inOut",
    onComplete: () => {
      isVisible.value = false
    }
  })
}

onMounted(() => {
  initThreeJS()
  startAnimation()
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  if (renderer) {
    renderer.dispose()
  }
})
</script>

<style scoped>
.opening-scene-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.8s ease;
}

.opening-scene-3d.fade-out {
  opacity: 0;
  transform: scale(1.1);
}

.scene-container {
  text-align: center;
  perspective: 1200px;
}

.logo-3d {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 40px;
  transform-style: preserve-3d;
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-20px) rotateY(180deg); }
}

.logo-face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.logo-face.front {
  transform: translateZ(100px);
}

.logo-face.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.logo-face.right {
  transform: rotateY(90deg) translateZ(100px);
  font-size: 16px;
}

.logo-face.left {
  transform: rotateY(-90deg) translateZ(100px);
  font-size: 14px;
}

.logo-face.top {
  transform: rotateX(90deg) translateZ(100px);
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.logo-face.bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.particles-container {
  width: 300px;
  height: 300px;
  margin: 0 auto 40px;
  position: relative;
}

.particles-container canvas {
  border-radius: 50%;
}

.loading-text {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin-bottom: 40px;
  letter-spacing: 4px;
}

.loading-char {
  display: inline-block;
  transform-style: preserve-3d;
}

.progress-container {
  width: 300px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .logo-3d {
    width: 150px;
    height: 150px;
  }
  
  .logo-face {
    width: 150px;
    height: 150px;
    font-size: 18px;
  }
  
  .logo-face.right {
    font-size: 12px;
  }
  
  .logo-face.left {
    font-size: 10px;
  }
  
  .loading-text {
    font-size: 18px;
  }
  
  .progress-container {
    width: 250px;
  }
}
</style>